<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>最近7天收费图表</title>
		<link rel="stylesheet" type="text/css" href="stats/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="stats/css/admin.css"/>
	</head>
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					
					<!--图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
		<script src="stats/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="stats/lib/echarts/echarts.js"></script>
		
		<script type="text/javascript">
			layui.use(['layer','jquery'], function(){
				var layer 	= layui.layer;
				var $=layui.jquery;
				
				//定义一个数组玩,实际上数据的来源是从后台数据取到的..
				
				
				var daysArray = [];
				var countArray = [];
				//此处使用jquery的ajax方法获取统计数据，将值放到图表中
				$.ajax({
					url:"selParment",
					type:"get",
					async: false,
					dataType:"json",
					success:function(data){
						//得到一个数组,需要遍历
						$.each(data,function(index,obj){
							console.log("-----"+obj.days+","+obj.count);
							//将值添加到数据
							daysArray.push(obj.days);
							countArray.push(obj.count);	
						});
						//console.log(countArray);
					}
					
				});
				
				
				//图表
				var myChart;
				require.config({
				    paths: {
				        echarts: 'stats/lib/echarts'
				    }
				});
				require(
				    [
				        'echarts',
				        'echarts/chart/bar',
				        'echarts/chart/line',
				        'echarts/chart/map'
				    ],
				    function (ec) {
				        //--- 折柱 ---
				       
				        myChart = ec.init(document.getElementById('chart'));
				        myChart.setOption(
				        	{
						     title: {
						        text: "数据统计",
						        textStyle: {
						            color: "rgb(85, 85, 85)",
						            fontSize: 18,
						            fontStyle: "normal",
						            fontWeight: "normal"
						        }
						    },
						    tooltip: {
						        trigger: "axis"
						    },
						    legend: {
						        data: ["收费数"],
						        selectedMode: false,
						    },
						    toolbox: {
						        show: true,
						        feature: {
						            dataView: {
						                show: false,
						                readOnly: true
						            },
						            magicType: {
						                show: false,
						                type: ["line", "bar", "stack", "tiled"]
						            },
						            restore: {
						                show: true
						            },
						            saveAsImage: {
						                show: true
						            },
						            mark: {
						                show: false
						            }
						        }
						    },
						    calculable: false,
						    xAxis: [
						        {
						            type: "category",
						            name:"日期",
						            boundaryGap: false,
						            data:daysArray
						        }
						    ],
						    yAxis: [
						        {
						            type: "value",
						            name:"元"
						        }
						    ],
						     grid: {
						        x2: 30,
						        x: 50
						    },
						    series: [
						        {
						            name: "收费数",
						            type: "line",
						            smooth: true,
						            itemStyle: {
						                normal: {
						                    areaStyle: {
						                        type: "default"
						                    },
						                    color: "rgb(110, 211, 199)"
						                }
						            },
						            data:countArray
						        }  
						    ]
						}
				        );
				        console.log(countArray);
					}
				);
				$(window).resize(function(){
					myChart.resize();
				})
			});				
		</script>
	</body>
</html>